<template>
  <!--  element-loading-background="rgba(0, 0, 0, 0.3)" -->
  <!-- element-loading-spinner="el-icon-loading" -->
  <el-container
    v-loading="ssqLoading"
    element-loading-text="拼命加载中 当你读完这段文字之后 数据就能加载出来了 如果读到这里还没加载出来 那就再读一遍~"
  >
    <!--direction="vertical" 垂直排版-->
    <!--left-->
    <el-aside width="60%">
      <el-card class="box-card" shadow="hover">
        <!-- 红色球 -->
        <div style="margin-top: 0px; text-align: left">
          <el-checkbox-group
            v-model="checkedArr0"
            size="small"
            style="height: 160px"
          >
            <el-checkbox
              border
              v-for="num in reds0"
              :label="num"
              :key="num"
              style="
                margin-left: -1px;
                margin-right: -1px;
                width: 55px;
                color: #ff0000;
              "
              >{{ num }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div style="margin-top: -120px; text-align: left">
          <el-checkbox-group
            v-model="checkedArr1"
            size="small"
            style="height: 160px"
          >
            <el-checkbox
              border
              v-for="num in reds1"
              :label="num"
              :key="num"
              style="
                margin-left: -1px;
                margin-right: -1px;
                width: 55px;
                color: #ff0000;
              "
              >{{ num }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div style="margin-top: -120px; text-align: left">
          <el-checkbox-group
            v-model="checkedArr2"
            size="small"
            style="height: 160px"
          >
            <el-checkbox
              border
              v-for="num in reds2"
              :label="num"
              :key="num"
              style="
                margin-left: -1px;
                margin-right: -1px;
                width: 55px;
                color: #ff0000;
              "
              >{{ num }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div style="margin-top: -120px; text-align: left">
          <el-checkbox-group
            v-model="checkedArr3"
            size="small"
            style="height: 160px"
          >
            <el-checkbox
              border
              v-for="num in reds3"
              :label="num"
              :key="num"
              style="
                margin-left: -1px;
                margin-right: -1px;
                width: 55px;
                color: #ff0000;
              "
              >{{ num }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <!-- 蓝色球 -->
        <div style="margin-top: -100px; text-align: left">
          <el-checkbox-group
            v-model="checkedArrBlue"
            size="small"
            style="height: 160px"
          >
            <el-checkbox
              border
              v-for="num in blues"
              :label="num"
              :key="num"
              style="
                margin-left: -1px;
                margin-right: -1px;
                width: 52px;
                color: #1e90ff;
              "
              >{{ num }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitNums">查看中奖历史</el-button>
          <el-button @click="resetNums">重置号码</el-button>
        </span>
      </el-card>
    </el-aside>
    <!--right 下面这些有重复的, 是否要独立组件?-->
    <el-main>
      <el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="6等奖">
            <el-table :data="historyArr6" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="5等奖">
            <el-table :data="historyArr5" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column> </el-table
          ></el-tab-pane>
          <el-tab-pane label="4等奖"
            ><el-table :data="historyArr4" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column> </el-table
          ></el-tab-pane>
          <el-tab-pane label="3等奖"
            ><el-table :data="historyArr3" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column> </el-table
          ></el-tab-pane>
          <el-tab-pane label="2等奖"
            ><el-table :data="historyArr2" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column> </el-table
          ></el-tab-pane>
          <el-tab-pane label="1等奖"
            ><el-table :data="historyArr1" style="width: 100%">
              <el-table-column
                prop="openDate"
                label="日期"
                :formatter="formatterOpenDate"
              ></el-table-column>
              <el-table-column prop="openNo" label="期号"></el-table-column>
              <el-table-column
                prop="redNums"
                label="号码"
                :formatter="formatterNums"
              ></el-table-column> </el-table
          ></el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { searchHistory } from "./env/service";
export default {
  name: "ssq",
  data() {
    return {
      // 页面加载开关
      ssqLoading: false,
      // 返回的历史号码
      historyArr1: [],
      historyArr2: [],
      historyArr3: [],
      historyArr4: [],
      historyArr5: [],
      historyArr6: [],
      // 已选号码
      checkedArr0: [],
      checkedArr1: [],
      checkedArr2: [],
      checkedArr3: [],
      checkedArrBlue: [],
      reds0: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"],
      reds1: ["11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
      reds2: ["21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
      reds3: ["31", "32", "33"],
      blues: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
      ],
    };
  },
  mounted() {
    //this.test();
  },
  created() {},
  methods: {
    // 重置号码
    resetNums() {
      this.checkedArr0 = [];
      this.checkedArr1 = [];
      this.checkedArr2 = [];
      this.checkedArr3 = [];
      this.checkedArrBlue = [];
    },
    // 查询历史提交
    submitNums() {
      let _this = this;
      let redArr = [];
      redArr = redArr
        .concat(this.checkedArr0)
        .concat(this.checkedArr1)
        .concat(this.checkedArr2)
        .concat(this.checkedArr3);
      console.log("redArr");
      console.log(redArr);
      let blueArr = [];
      blueArr = blueArr.concat(this.checkedArrBlue);
      console.log("blueArr");
      console.log(blueArr);
      // 检验参数
      if (redArr.length < 6) {
        _this.$message.error("红色球, 不能少于6个");
        return;
      }
      if (redArr.length > 15) {
        _this.$message.warning("小站性能差, 红色球至多选择15个");
        return;
      }
      if (blueArr.length <= 0) {
        _this.$message.error("蓝色球, 不能少于1个");
        return;
      }
      // 加载(遮罩)
      _this.ssqLoading = true;
      // 请求服务端
      searchHistory(
        { userRedNums: redArr, userBlueNums: blueArr },
        "查询中奖历史",
        function (res) {
          console.log(res);
          if (res.status == "SUCCESS") {
            _this.$message.success("查询成功");
            let winMap = res.data.winMap;
            _this.historyArr1 = winMap[1];
            _this.historyArr2 = winMap[2];
            _this.historyArr3 = winMap[3];
            _this.historyArr4 = winMap[4];
            _this.historyArr5 = winMap[5];
            _this.historyArr6 = winMap[6];
          }
          _this.ssqLoading = false;
        }
      );
    },
    // 处理日期
    formatterOpenDate(row, column) {
      let openDate = row.openDate;
      openDate = openDate.substring(0, 10);
      console.log(openDate);
      return openDate;
    },
    // 处理号码
    formatterNums(row, column) {
      // 命中红球
      let arrHit = row.redHitNums;
      // 全部红球
      let arr = row.redNums;
      // 声明node 节点
      let reds = [];
      for (let n of arr) {
        let showN = n;
        if (n < 10) {
          showN = "0" + n;
        }
        if (arrHit.includes(n)) {
          const red = <span style="color:red">{showN}</span>;
          reds.push(red);
          reds.push(" ");
        } else {
          reds.push(showN);
          reds.push(" ");
        }
      }
      // 处理蓝色
      let blues = [];
      let showblue = row.blueNum;
      if (showblue < 10) {
        showblue = "0" + showblue;
      }
      if (row.blueNum == row.blueHitNum) {
        blues.push(<span style="color:blue">{showblue}</span>);
      } else {
        blues.push(showblue);
      }
      return (
        <p>
          {reds}|{blues}
        </p>
      );
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
  /*下边距*/
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
